<template>
	<view>
		<navbar :config="config" backColor="#000"></navbar>
		<view class="top-box">
			<text class="integral">{{ $addDecimals(integral_able , 8) }}</text>
			<text class="title " v-show="zydc_to_worth_enabled">当前积分</text>
			<text class="worth" v-show="zydc_to_worth_enabled">当前积分价值：

				<text class="worthText">{{ pointconfigInfo.point_price }}元</text></text>
			<view class="integral-btns"
				v-show="zydc_income_enabled||zydc_outcome_enabled||(openProxy == true&&zydc_to_balance_enabled)">
				<!-- <text class="integral-btn" @click.stop="exchangeIntegral()">兑换余额</text> -->
				<text class="integral-btn" style="margin-left: 0;" v-show="zydc_income_enabled"
					@click.stop="toPayment()">积分转入</text>
				<text class="integral-btn" v-show="zydc_outcome_enabled" @click.stop="toSubmit()">积分转出</text>

				<text class="integral-btn" @click.stop="goIntegralTransferred()"
					v-if="openProxy == true&&zydc_to_balance_enabled">积分转赠</text>
			</view>
		</view>
		<view class="content-box">
			<view class="list-box">
				<view class="list-box-title">
					<view class="list-box-title-item">
						<view @click.stop="activeType = 1"
							:class="['list-title' , activeType == 1 ? 'active-list-title' : '']">
							<view>积分详情</view>
							<view class="lineView" v-show="activeType==1"></view>
						</view>

					</view>
					<view class="list-box-title-item">
						<view @click.stop="activeType = 2"
							:class="['list-title' , activeType == 2 ? 'active-list-title' : '']">
							<view>积分明细</view>
							<view class="lineView" v-show="activeType==2"></view>
						</view>
					</view>
				</view>
				<view class="list-item-box" v-if="activeType === 1">
					<template>
						<block v-for="item in integralInfo">
							<view class="list-item list-info-item" style="border-bottom: 2rpx solid #000 !important;">
								<!-- <image class="list-info-img" :src="item.icon" mode=""></image> -->
								<view class="list-info-text">
									<text class="text-title">{{ item.name }}</text>
									<text v-if="item.way"
										class="text-num">{{ $addDecimals(subtractionNum(pointconfigInfo[item.key_1] , pointconfigInfo[item.key_2]) , item.length)  }}</text>
									<!-- <text v-if="item.way" class="text-num">{{ pointconfigInfo[item.key_1] }}</text> -->
									<text v-else
										class="text-num">{{ $addDecimals(pointconfigInfo[item.key] , item.length) }}</text>
								</view>
							</view>
						</block>
					</template>

				</view>

				<view class="list-item-boxTwo" v-if="activeType === 2">
					<template>
						<block v-for="(item, index)  in pointsList" :key="index">
							<view class="list-item">
								<view class="list-item-text">
									{{item.mode}}
								</view>
								<view class="list-item-val">
									<text class="list-item-time">{{ item.create_time }}</text>
									<text class="list-item-nums">
										{{ item.bill_type == 1 ? '+' : '-'}}{{ $addDecimals(item.value) }}积分
									</text>
								</view>
							</view>
						</block>

						<loadMore v-if="pointsList.length>0" :status="status"></loadMore>
						<nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
					</template>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAccountInfo
	} from "@/api/login.js"
	import math from "@/common/math.js"
	import {
		pointconfig,
		destroyIntegral
	} from "@/api/personal-center.js"
	import {
		detailedInfo
	} from "@/api/notice.js";
	export default {
		data() {
			return {
				activeType: 2,
				cnhd_outcome_enabled: false,
				zydc_income_enabled: false,
				zydc_outcome_enabled: false,
				zydc_to_worth_enabled: false,
				zydc_to_balance_enabled: false,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '我的积分',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",

				},
				// 积分余额
				integral_able: 0,
				pointsList: [],
				pointconfigInfo: {
					platform_total_point: 0,
					every_day_put_int_point: 0,
					point_price: 0
				},
				params: {
					page: 1,
					limit: 10
				},
				status: 'loading', //more|loading|noMore
				integralInfo: [{
						icon: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/personal/integral1.png',
						name: '平台释放总积分数量',
						key: 'platform_total_point',
						length: 8,
					},
					{
						icon: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/personal/integral2.png',
						name: '平台未释放积分数量',
						way: true,
						length: 8,
						// key_1 - key_2
						key_1: 'platform_total_point',
						key_2: 'give_total_point',
					},
					{
						icon: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/personal/integral3.png',
						name: '每日权重释放数量',
						key: 'every_day_put_int_point',
						length: 8
					},
					{
						icon: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/personal/integral4.png',
						name: '当前积分价值（元）',
						key: 'point_price',
						length: 2
					},
					{
						icon: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/personal/integral5.png',
						name: '已释放积分数',
						key: 'give_total_point',
						length: 8
					},
					{
						icon: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/personal/destroy.png',
						name: '已销毁积分数',
						key: 'all_handling_fee',
						length: 8
					}
				],
				openProxy: false, // 是否开启区域代理
			}
		},
		onShow() {
			this.pointsList = [];
			this.getUserInfo()
			this.getMydetailed();
			this.isOpenProxy()
			this.configInfo()
		},
		onLoad() {
			this.getPointconfig()
			// this.getDestoryPoint()
		},
		onReachBottom() {
			if (this.activeType === 2 && this.status !== 'loading' && this.status !== 'noMore') {
				this.params.page++
				this.getMydetailed()
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.pointsList = []
			this.getMydetailed()
			this.isOpenProxy()
		},
		methods: {
			configInfo() {
				this.$http.get('/app/config/info').then(res => {
					if (res && res.code == 200) {
						this.cnhd_outcome_enabled = res.data.cnhd_outcome_enabled
						this.zydc_income_enabled = res.data.zydc_income_enabled
						this.zydc_outcome_enabled = res.data.zydc_outcome_enabled
						this.zydc_to_balance_enabled = res.data.zydc_to_balance_enabled
						this.zydc_to_worth_enabled = res.data.zydc_to_worth_enabled
					}
				})
			},
			//获取个人信息
			getUserInfo() {
				this.$http.get(getAccountInfo).then(res => {
					if (res && res.code == 200) {
						this.integral_able = res.data.integral_able;
						uni.setStorageSync("personal", res.data)
					} else {
						this.isLogin = false
					}
				})
			},
			// 计算 平台未释放积分数量
			subtractionNum(num_1 = 0, num_2 = 0) {
				return math.subtract(num_1, num_2)
			},
			// 获取积分详情
			getPointconfig() {
				this.$http.get(pointconfig).then((res) => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.pointconfigInfo = res.data
						this.getDestoryPoint()
					}
				});
			},
			getDestoryPoint() {
				this.$http.get(destroyIntegral).then((res) => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.pointconfigInfo.all_handling_fee = res.data.all_handling_fee
					}
				});
			},
			// 获取积分明细
			getMydetailed() {
				this.status = 'loading';
				this.$http.get(detailedInfo, this.params).then((res) => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.pointsList = this.pointsList.concat(res.page.list);
						if (res.page.totalPage <= res.page.currPage) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}
					}
				});
			},
			// 兑换余额
			exchangeIntegral() {
				uni.navigateTo({
					url: "/pages/user/exchange"
				})
			},
			// 积分转赠
			goIntegralTransferred() {
				uni.navigateTo({
					url: "/pages/user/Integral-transferred"
				})
			},
			isOpenProxy() {
				this.$http.get('/saleconfig/openPayment').then(res => {
					if (res && res.code == 200) {
						this.openProxy = res.openPayment;
					}
				});
			},
			toPayment() {
				uni.navigateTo({
					url: "/pages/user/payment/payment"
				})
			},
			toSubmit() {
				uni.navigateTo({
					url: "/pages/user/submit/submit"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
	}

	.top-box {
		width: 712rpx;
		height: auto;
		background: #fff;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		font-weight: 400;
		color: #ffffff;
		margin-top: 19rpx;
		margin-left: 19rpx;
		padding-bottom: 38rpx;
		box-sizing: border-box;


		.title {
			margin-top: 7rpx;
			font-weight: 400;
			font-size: 27rpx;
			color: #333333;
			line-height: 27rpx;
		}

		.worth {
			font-weight: 400;
			font-size: 25rpx;
			color: #333333;
			margin-top: 38rpx;
			line-height: 25rpx;

			.worthText {
				font-weight: 400;
				font-size: 27rpx;
				color: #999999;
			}
		}

		.integral {
			font-weight: bold;
			font-size: 58rpx;
			color: #FF211F;
			line-height: 77rpx;
			margin-top: 40rpx;
			height: 77rpx;
		}

		.integral-btns {
			width: 100%;
			height: 83rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 96rpx;
			padding: 0 38rpx;

			.integral-btn {

				width: 308rpx;
				height: 85rpx;
				border-radius: 19rpx 19rpx 19rpx 19rpx;
				border: 2rpx solid #FF211F;
				text-align: center;
				font-weight: 500;
				font-size: 29rpx;
				color: #FF211F;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-left: 19rpx;

			}
		}
	}

	.content-box {
		width: 100%;
		position: relative;
		margin-top: 19rpx;
	}

	.list-box {
		width: 100%;
		position: absolute;

		.list-box-title {
			width: 100%;
			height: 103.5rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// padding: 0 60rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;
			margin-bottom: 19rpx;

			// margin-left: 19rpx;
			.list-title {
				width: 356rpx;
				height: 96rpx;
				border-radius: 19rpx 19rpx 19rpx 19rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 4rpx;
				padding-top: 28rpx;
			}

			.active-list-title {
				font-weight: 600;
				font-size: 29rpx;
				color: #333333;

			}
		}

		.list-item-box {
			width: 712rpx;
			height: 865rpx;
			background: #FFFFFF;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin-left: 19rpx;

		}

		.list-item-boxTwo {
			// background: #F9F9F9;
			border-radius: 20rpx;
		}
		

		.list-item {
			width: 712rpx;
			// min-height: 161rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
			// text-align: left;
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
			background-color: #fff;
			margin: 0 auto;
			padding: 0 19rpx;
			box-sizing: border-box;
			height: 144rpx;

			.list-item-text {
				// opacity: 0.9;
				font-size: 28rpx;
				color: #474747;
			}

			.list-item-val {
				padding-top: 14rpx;
				display: flex;
				justify-content: space-between;
				align-content: center;
				align-items: center;

				.list-item-time {
					font-size: 28rpx;
					color: #AAAAAA;
					flex-shrink: 0;
				}

				.list-item-nums {
					padding-left: 10px;
					font-size: 30rpx;
					color: #06B223;
				}
			}


		}

		


		.list-info-item {
			// width: 712rpx;
			// height: 865rpx;
			background: #FFFFFF;
			// border-radius: 19rpx 19rpx 19rpx 19rpx;
			width: 100%;
			height: 144rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// border: 1rpx solid #F5F5F5;

			.list-info-img {
				width: 82rpx;
				height: 82rpx;
			}

			.list-info-text {
				width: calc(100% - 71rpx);
				display: flex;
				flex-direction: column;

				.text-title {
					font-weight: 500;
					font-size: 29rpx;
					color: #333333;
					line-height: 29rpx;
					margin-bottom: 15rpx;
				}

				.text-num {
					font-weight: 400;
					font-size: 27rpx;
					color: #999999;
					line-height: 27rpx;
				}
			}
		}
	}
	.list-info-item:nth-child(1) {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		
		
	}

	.lineView {
		width: 35rpx;
		height: 6rpx;
		border-bottom: 2rpx solid #FF211F;
	}

	.list-box-title-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.no-data-view {
		margin-top: 38rpx;
	}
</style>